<template>
  <!--博客列表区-->
  <div id="primary" class="content-area">
    <!--内容列表-->
    <main
      id="main"
      v-infinite-scroll="load"
      :infinite-scroll-delay="800"
      :infinite-scroll-immediate="false"
      :infinite-scroll-distance="store.state.infiniteScrollDistance"
      class="site-main"
      ><h1 class="main-title"
        ><i class="fa fa-book faa-ring animated faa-slow" aria-hidden="true"></i
        >Discovery</h1
      >
      <!--文章列表-->
      <li
        v-for="(item, index) in recodes"
        :key="index"
        :class="index % 2 === 0 ? '' : 'post-list-thumb-left'"
        class="post post-list-thumb post-list-show"
      >
        <div class="post-thumb">
          <router-link :to="{ path: `/article/${item.id}` }">
            <el-image :src="item.titlePicture" fit="cover">
              <template #error>
                <div class="image-slot">
                  <el-image
                    :src="randomArrayIndex(store.state.defaultErrorImageUrl)"
                    fit="cover"
                  ></el-image>
                </div>
              </template>
            </el-image>
          </router-link>
        </div>
        <div class="post-content-wrap">
          <div class="post-content">
            <div class="post-date">
              <el-avatar :src="item.user.avatar"></el-avatar>
              <span class="comments-number"> </span>
              {{ item.user.name }}
              <span class="comments-number"> </span>
            </div>
            <div class="poss-date">
              <i class="fa fa-clock-o" aria-hidden="true"></i> 发布于
              {{ item.createTime }}
            </div>
            <router-link
              :to="{ path: `/article/${item.id}` }"
              class="post-title"
              ><h3> {{ item.title }}</h3></router-link
            >
            <div class="post-meta">
              <span>
                <i
                  class="fa fa-fire animated faa-vertical faa-slow"
                  aria-hidden="true"
                ></i
                >{{ item.views }} 热度
              </span>
              <span class="comments-number">
                <i
                  class="fa fa-commenting-o animated faa-ring faa-slow"
                  aria-hidden="true"
                ></i>
                <router-link :to="{ path: `/article/${item.id}` }"
                  >{{ item.commentDistCount }} 条评论</router-link
                >
              </span>
              <span
                ><i
                  class="fa fa-tags animated faa-horizontal faa-slow"
                  aria-hidden="true"
                ></i>
                <router-link
                  :to="{ path: `/tag/${item.technologicalTypeVO.id}` }"
                >
                  {{ item.technologicalTypeVO.typeName }}
                </router-link>
              </span>
            </div>
            <div class="float-content"
              ><p>{{ item.description }}</p>
              <div class="post-bottom">
                <router-link
                  :to="{ path: `/article/${item.id}` }"
                  class="button-normal"
                  ><i class="fa fa-ellipsis-h"></i
                ></router-link>
              </div>
            </div>
          </div>
        </div>
      </li>
    </main>
    <!--翻页-->
    <div class="pagination-box">
      <div id="pagination" :class="pageInfo.isHave ? 'loading' : ''">
        <span>{{ pageInfo.isHave ? '' : '已经到底部啦...' }}</span>
      </div>
    </div>
  </div>
</template>
<!--:-->
<script setup>
  import { randomArrayIndex } from '@/utils/randomArrayElemt'
  import { onActivated, onBeforeMount, reactive, ref, toRaw } from 'vue'
  import { getArticleList } from '@/api/article/article'
  import * as types from '@/store/mutation-types'
  import { useStore } from 'vuex'
  import { onBeforeRouteLeave } from 'vue-router'

  const store = new useStore()

  const pageInfo = reactive({
    current: 1,
    size: 10,
    pages: null,
    isHave: true
  })

  //文章信息列表
  const recodes = toRaw(ref([]))

  /**
   * 滚动加载回调
   */
  const load = () => {
    //判读是否可以加载
    if (!store.state.load.isLoad) return
    if (pageInfo.current >= pageInfo.pages || !pageInfo.pages) {
      pageInfo.isHave = false
      return
    }
    getList(++pageInfo.current)
  }

  /**
   * 获取博客列表信息
   * @param current
   * @param size
   */
  const getList = (current = 1, size = 10) => {
    getArticleList({
      current,
      size
    })
      .then((res) => {
        if (!pageInfo.pages) {
          pageInfo.pages = res.data.pages
        }
        recodes.value.push(...res.data.records)
      })
      .catch(() => {})
  }

  onBeforeRouteLeave((to, from, next) => {
    store.commit(types.CHANGED_INFINITE_SCROLL_DISTANCE, {
      infiniteScrollDistance: -99999,
      isLoad: false
    })
    next()
  })

  onActivated(() => {
    if (!pageInfo.isHave) {
      return
    }
    store.commit(types.CHANGED_INFINITE_SCROLL_DISTANCE, {
      infiniteScrollDistance: 0,
      isLoad: false
    })
  })

  onBeforeMount(() => {
    getList()
  })
</script>

<style lang="less" scoped>
  .post-thumb {
    .el-image {
      width: 100%;
      height: 100%;
    }
  }

  .image-slot {
    width: 100%;
    height: 100%;
  }

  .pagination-box {
    width: 150px;
    display: flex;
    width: 150px;
    margin: 0 auto;
  }
</style>
